<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:o="http://openfaces.org/"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <head>
    </head>
    <body>
        <ui:composition template="/templates/default.xhtml">
        
        	<ui:param name="crud" value="#{socialGroupCrud}" />

			<ui:define name="listing">
				<ui:include src="list.xhtml" />
			</ui:define>

            <ui:define name="display">  
            	<h:outputText value="#{navController.breadcrumbTrail}" />
            
                <h1><h:outputText value="#{msg.socialGroupCreate}"/></h1>
                <h:messages id="errors" globalOnly="true" />
                <h:form id="form">   
                    <h:panelGrid columns="4">
                    
	                    <c:if test="#{socialGroupIdGenerator.generated == false}" >
	                   		<h:outputText value="#{msg.socialGroupId}:" />
	                   		<h:outputText />
	                    	<h:inputText id="extId" value="#{socialGroupCrud.item.extId}" converter="#{defaultConverter}" />
							<h:message for="extId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>  
	                   	</c:if>
                    
                        <h:outputText value="#{msg.socialGroupName}:"/>
                        <h:outputText />
                        <h:inputText id="name" value="#{socialGroupCrud.item.groupName}" converter="#{defaultConverter}"/>
                        <h:message for="name" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

	                    <h:outputText value="#{msg.socialGroupType}:"/>
	                    <img class="clickable" onclick="O$('popupWindowForSGType').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                    <h:inputText id="sgType1" value="#{socialGroupCrud.item.groupType}" converter="#{defaultConverter}" />
	                    <h:message for="sgType1" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
												
						<h:outputText value="#{msg.socialGroupHead}:"/>
						<h:outputText />
						<h:inputText styleClass="individual" autocomplete="off" id="head" value="#{socialGroupCrud.item.groupHead}" disabled="#{flowScope.updatingBaseline}" converter="#{individualExtIdConverter}" />
                   		<h:message for="head2" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                        <h:outputText value="#{msg.fieldWorkerId}:"/>
                        <h:outputText />
                        <h:inputText styleClass="collectedBy" autocomplete="off" id="fieldWorker" disabled="#{flowScope.updatingBaseline}" value="#{socialGroupCrud.item.collectedBy}" converter="#{fieldWorkerExtIdConverter}"/>
                        <h:message for="fieldWorker" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                  
					</h:panelGrid>
                    <script>
		            	document.getElementById('form:name').focus();
		            	document.getElementById('form:extId').focus();
		            </script>
                    <br />
               		<h:commandButton action="#{socialGroupCrud.create}" value="#{msg.lblCreate}" rendered="#{flowScope == null}" />
                    <h:outputText value=" " />
                    <h:commandButton id="createSocialGroup" action="createSocialGroup" value="#{msg.lblCreate}" rendered="#{flowScope != null}" />
                    <h:outputText value=" " />              		
               		<h:commandButton value="#{msg.lblCancel}" immediate="true" action="cancel" rendered="#{flowScope != null}" />
                </h:form>
            </ui:define>
        </ui:composition>
    </body>
</html>